
<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title>一键订水</title>
	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
	<meta http-equiv="Pragma" content="no-cache"/>
	<meta http-equiv="Expires" content="0"/>
	<meta name="viewport"
		  content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
	<link href="css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="./fonts/font_tabbar/iconfont.css"/>
	<link rel="stylesheet" href="./css/public.css?v=20181211" />
	<link rel="stylesheet" href="css/member-ticket.css?v=20181211" />
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
	<script src='./js/jquery-3.2.1.min.js'></script>
	<script src="./js/mui.min.js"></script>
	<!--<script src="./js/mui.js"></script>-->
	<script src="./js/art-template.js"></script>
	<script src="./js/config.js?v=20181211"></script>
</head>

<body>
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
	<!--侧滑菜单部分-->
	<aside id="offCanvasSide" class="mui-off-canvas-right">
		<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--地址列表-->
				<div id="address_list_content">

				</div>
			</div>
		</div>
	</aside>
	<!--主界面部分-->
	<div class="mui-inner-wrap">
		<header class="mui-bar mui-bar-nav header_change_color">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color:#fff;"></a>
			<h1 class="mui-title" style="color:#fff;">一键订水</h1>
		</header>
		<form action="" name='myform' id='myform' class='mui-content'>
			<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper none" style="margin-bottom: 4rem;margin-top: 2.5rem">
				<div class="mui-scroll">
					<div class='mui-content' >

						<div class="mui-slider" id="slider_img_content">
							<img class="left_img" src="image/left.png" style="width: 2rem;height: 2rem;position: absolute;top: 4rem;left: 1rem;z-index: 100;">
							<img class="right_img" src="image/right.png" style="width: 2rem;height: 2rem;position: absolute;top: 4rem;right: 1rem;z-index: 100">
						</div>
						<input hidden id="slideNumbers" value="0">
						<!--计算加减-->

						<div class="mui-numbox" id="data-num" data-numbox-min='1' style="display: flex;display:-webkit-flex;background-color: #fff;">
							<!-- "-"按钮，点击可减小当前数值 -->
							<button id='min-button'  class=" mui-btn mui-numbox-btn-minus" type="button">-</button>
							<input id='mui-numbox-input' style="border-left: none!important;border-right: none!important;" class=" mui-numbox-input" type="number" value="1" />
							<!-- "+"按钮，点击可增大当前数值 -->
							<button id='max-button' class="mui-btn mui-numbox-btn-plus" type="button">+</button>
						</div>

						<!--收货地址-->
						<div id="offCanvasShow"  style="border-bottom: 0.3rem solid #F0F0F0">
							<div class='mui-action-menu has_address' style="display: flex;display: -webkit-flex;background: #fff;padding: 0.5rem 0;" id="address_content">

								<!--无地址时-->
							</div>
							<div id="time_content"></div>
						</div>

						<!--备注-->
						<div class="remark-input" style="margin: 0.7rem 0 1rem 0;">
							<input id='remark-input' type="text" class="mui-input-clear" placeholder="有特殊要求请在这里备注">
							<!--<textarea style="font-size: 14px;line-height: 30px;overflow: hidden;" id='remark-input' type="text" class="mui-input-clear" placeholder="有特殊要求请在这里备注"></textarea>-->
						</div>
						<div style="width: 100%" id="empty_div"></div>
						<div class="bac_rgba none"></div>

						<!--各要传数据的隐藏域-->
						<input type="hidden" id="tickt_id">
					</div>

				</div>
			</div>
			<!--确认订水-->
			<div class='sure-submit none' style="z-index: 1">  <!--sure-submit-->
				<button  id='button' type="button">确定订水</button>
			</div>
		</form>
		<!--没有数据时 -- kong页面 -->
		<div class="no_ticket no-content none" style="width: 100%;height: 100%">
			<div class="mui-content" style="display: flex;display:-webkit-flex;align-items: center;-webkit-align-items:center;justify-content: center;-webkit-justify-content:center;">
				<div style="margin-top:50%;width: 60%;height: 50%;display: flex;display:-webkit-flex;align-items: center;-webkit-align-items:center;justify-content: center;-webkit-justify-content: center;flex-direction: column;-webkit-flex-direction: column">
					<!--<img src="image/img.png" style="width: 100%;height: auto;border-radius: 100px">-->
					<p style="margin-top: 2rem;font-size: 1rem;color: #8f8f94;">~~您还没有水票哟~~</p>
					<p class="toTickList" onclick="redirect('water-ticket.html')" style="display:inline-block;padding: 1rem 2rem;border: 1px solid #25bdef;color:  #25bdef;border-radius: 20px;margin-top: 1rem">立即购买</p>
				</div>
			</div>
		</div>
		<!-- off-canvas backdrop -->
		<div class="mui-off-canvas-backdrop"></div>
	</div>
</div>
<script src='js/commen.js?v=20181211'></script>
<script src="./js/take-water-detail.js?v=20181211"></script>
<!--轮播图-->
<script type="text/html" id="slider_img">

	<div class="mui-slider-group">
		<!--内容区容器-->
		{{each waterbill_list bill}}
		<div class="mui-slider-item">
			<img class="slide-image" src="{{bill.goods_img}}" alt="" />
			<p>{{bill.goods_name}}</p>
			<p>
				<span style="color:red;">余票 ：{{bill.rest_num}} 桶</span>
				{{if bill.rest_num <= 0}}
				<span class='toBuy' style="padding-left: 1rem;color: #25BDEF"> 点击购买> </span>
				{{/if}}
			</p>
		</div>
		{{/each}}
	</div>
</script>

<!--收货地址-->
<script type="text/html" id="address">
	{{each address_list address}}
	{{if address.is_default == 1}}
	<div class="nctouch-cart-add-default" style="padding: 0.1px;">
		<div class="show_zhezhao "  style="float: left;width: 85%">
			<div style="display: flex;display:-webkit-flex;justify-content: space-between;-webkit-justify-content:space-between">
				<p style="width: 90%">收货人：
					<span class='about-name-new'>{{address.name}}</span>
					<span class="about_mobile" style="margin-left: 0.5rem">{{address.mobile}}</span>
				</p>
			</div>
			<p>收货地址：<span id="address_detail"></span></p>
		</div>
		<img class="show_zhezhao"  style="width: 1rem;height: 1rem;margin-top: 1.3rem;float: right" src="image/right.png">
	</div>
	{{/if}}
	{{/each}}
</script>

<!--地址列表-->
<script type="text/html" id="address_list">
	{{each address_list address}}
	<div id="{{address.id}}" class='list_ocntent' style="border-bottom: 1px solid #f1f1f1;margin-bottom: 0.5rem;padding-bottom: 0.5rem;
													display: flex;align-items: center;justify-content: center; display: -webkit-flex;-webkit-align-items: center;-webkit-justify-content: center">
		<div style="width: 90%;position: relative" class="ad_list">
			<p style="color: #fff"><span class=''>收货人：{{address.name}}</span> </p>
			<p style="color: #fff"><span>电话：{{address.mobile}}</span></p>
			<p style="color: #fff" class="" >收货地址：{{address.area_info}}{{address.position_address}} {{address.address}}</p>

			<p class="choosed choosed{{address.id}}" style="position: absolute;top: -0.8rem;right:-1rem;width: 2rem;height: 2rem;background: #25bdef">
				<span style="color: #fff;font-size: 0.5rem;margin-left: 0.3rem">默认</span>
				<span class="sanjiao_down"></span>
			</p>
		</div>
	</div>
	{{/each}}
</script>
<script type="text/html" id="time">
	<div style="padding: 0 0.5rem;color: #928f8f">配送时间：
	{{if work_time != undefined && work_time != null && work_time != ''}}
		<span>{{work_time}}</span>
	{{/if}}
	{{if work_time == undefined || work_time == null || work_time == ''}}
		<span>08:00 - 17:00</span>
	{{/if}}
		<span style="margin-left: 0.3rem">超时于第二日送达</span>
	</div>
</script>
<script>
    mui.init();
    //侧滑容器父节点
    var offCanvasWrapper = mui('#offCanvasWrapper');
    //主界面容器
    var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
    //菜单容器
    var offCanvasSide = document.getElementById("offCanvasSide");
    if (!mui.os.android) {
        if(document.getElementById("move-togger") && document.getElementById("move-togger").classList){
            document.getElementById("move-togger").classList.remove('mui-hidden');
            var spans = document.querySelectorAll('.android-only');
            for (var i = 0, len = spans.length; i < len; i++) {
                spans[i].style.display = "none";
            }
		}
    }
    //移动效果是否为整体移动
    var moveTogether = false;
    //侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
    var classList = offCanvasWrapper[0].classList;
    //变换侧滑动画移动效果；
    mui('.mui-input-group').on('change', 'input', function() {
        if (this.checked) {
            offCanvasSide.classList.remove('mui-transitioning');
            offCanvasSide.setAttribute('style', '');
            classList.remove('mui-slide-in');
            classList.remove('mui-scalable');
            switch (this.value) {
                case 'main-move':
                    if (moveTogether) {
                        //仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
                        offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
                    }
                    break;
                case 'main-move-scalable':
                    if (moveTogether) {
                        //仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
                        offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
                    }
                    classList.add('mui-scalable');
                    break;
                case 'menu-move':
                    classList.add('mui-slide-in');
                    break;
                case 'all-move':
                    moveTogether = true;
                    //整体滑动时，侧滑菜单在inner-wrap内
                    offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);
                    break;
            }
            offCanvasWrapper.offCanvas().refresh();
        }
    });

    //实现ios平台原生侧滑关闭页面；
    if (mui.os.plus && mui.os.ios) {
        mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
            plus.webview.currentWebview().setStyle({
                'popGesture': 'none'
            });
        });
    }
</script>
</body>

</html>
